<script setup>
import { ref } from 'vue'
import { throttle } from 'lodash'
import { useRouter } from 'vue-router';



const router = useRouter();
const searchText = ref('')



const search = async () => {
  router.push({ path: '/record/view', query: { searchText: searchText.value } })

}




// const tips = throttle((e) => {

//   const fn = (e) => {

//   }

//   fn(e)
// }, 1000)




</script>

<template>

  <div class="searchBox">

    <div class="search">
      <!-- 内部图标 -->
      <el-icon>
        <Search />
      </el-icon>
      <!-- 搜索框输入部分 -->
      <input type="text" v-model="searchText" placeholder="我是搜索框">
      <!-- 搜索字样部分 -->
      <div class="searchText" @click="search()">
        搜索
      </div>

    </div>
  </div>

</template>


<style lang="scss" scoped>
.searchBox {
  width: 100%;
  display: flex;

  size: 20px;




  .search {
    border: #e5e3e0 solid 2px;
    width: 100%;
    height: 25px;
    background-color: #e5e3e0;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    input {
      flex: 8;
      height: 100%;
      font-size: 0.16rem;
      background: transparent;
    }

    .el-icon {
      font-size: 15px;
      flex: 1;
    }

    .searchText {
      height: 90%;
      color: #e5e5e5;
      background: #e60013;
      margin-right: 3px;
      border-radius: 30px;
      flex: 1;
      cursor: pointer;
      line-height: 0.26rem;
      text-align: center;
    }
  }
}
</style>